<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>进度条生成工具</title>
  <link rel="stylesheet" href="./libs/element-plus/index.css" />
  <style>
    body {
      --height: 76px;
    }
    * {
      margin: 0;
      padding: 0;
      background-color: transparent;
    }

    .main {
      position: relative;
      /* transform: scale(0.8); */
    }

    .parent {
      
      display: flex;
      width: 1920px;
      height: var(--height);
      background-color: transparent;
      margin: 0 auto;
      box-sizing: border-box;

      border-style: solid;

      .child {
        flex: 1;
        border-style: solid;
        border-top: none;
        border-bottom: none;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
      }
    }

    .progress-box {
      width: 1920px;
      height: var(--height);

      position: absolute;
      top: 0;
      /* left: 50%;
      transform: translate(-50%,-50%); */
      z-index: -1;
      background-color: aquamarine;

      .bg {
        width: 1920px;
        height: var(--height);
      }

      .progress {
        width: 1000px;
        height: var(--height);
        position: absolute;
        top: 0;
      }
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="preview">
      <h2 style="text-align: center;">实时展示</h2>
      <div class="main">
        <div class="parent" id="parent"
          :style="{ borderWidth: globalConfig.border.size + 'px', borderLiftWidth: globalConfig.border.size/2 + 'px', borderRightWidth: globalConfig.border.size/2 + 'px',  borderColor: globalConfig.border.color}">
          <div class="child"
            :style="{ borderWidth: globalConfig.border.size / 2 + 'px', borderColor: globalConfig.border.color, flex: (index !== 0?(item.endTime.getTime() - list[index-1].endTime.getTime())/1000:(item.endTime.getTime()-offset)/1000)}"
            v-for="(item,index) in list" :key="item.id">
            <p :style="{color:globalConfig.font.color,fontSize:globalConfig.font.size + 'px'}">{{item.text}}</p>
          </div>
        </div>
        <div class="progress-box" :style="{display: bgShow?'block':'none'}">
          <div class="bg" :style="{backgroundColor: bgColor}"></div>
          <div class="progress" :style="{backgroundColor: progressColor}"></div>
        </div>
      </div>
    </div>

    <div class="config">
      <h2 style="text-align: center;">参数配置</h2>
      <div class="global-style">
        <div class="bg">
          <span>底色</span><el-color-picker v-model="bgColor"></el-color-picker>
          <span>进度色</span><el-color-picker v-model="progressColor"></el-color-picker>
          <el-switch v-model="bgShow"></el-switch>
        </div>
        <div class="font">
          <span>字体颜色</span><el-color-picker v-model="globalConfig.font.color"></el-color-picker>
          <span>字号</span><el-input-number v-model="globalConfig.font.size" :min="10"></el-input-number>
        </div>
        <div class="border">
          <span>边框颜色</span><el-color-picker v-model="globalConfig.border.color"></el-color-picker>
          <span>边框粗细</span><el-input-number v-model="globalConfig.border.size" :min="0"></el-input-number>
        </div>
      </div>
      <div class="sections">
        <p>章节列表</p>
        <!-- 最好有个拖拽排序的控件 -->
        <ol>
          <li class="section-item" v-for="item in list" :key="item.id">
            <span>章节：</span>
            <el-input v-model="item.text" style="width: 200px;" placeholder="请输入章节标题"></el-input>
            <span>结束时间：</span>
            <el-time-picker v-model="item.endTime" placeholder="请选择结束时间"></el-time-picker>
            <el-button type="danger" plain @click="deleteSection(item.id)">删除</el-button>
            <span>局部缩放</span><el-input-number v-model="item.scale" :min="0"></el-input-number>
          </li>
        </ol>
        <el-button type="primary" @click="pushNewSection">新增章节</el-button>
      </div>
    </div>
    <el-button @click="convert()">保存本地</el-button>
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
  <script src="./libs/vue/vue.global.js"></script>
  <script src="./libs/element-plus/index.full.min.js"></script>
  <script type="text/javascript">
    const { createApp, ref } = Vue

    const app = createApp({
      setup() {
        function convert() {
          html2canvas(document.getElementById('parent'), {
            backgroundColor: null, // 设置图片背景为透明
          })
            .then(canvas => {

              document.body.appendChild(canvas)

              var url = canvas.toDataURL('image/png');
              // 生成一个a元素
              var a = document.createElement('a');
              // 创建一个单击事件
              var event = new MouseEvent('click');
              // 将a的download属性设置为我们想要下载的图片的名称，若name不存在则使用‘下载图片名称’作为默认名称
              a.download = name || '下载图片名称';
              // 将生成的URL设置为a.href属性
              a.href = url;
              // 触发a的单击事件
              a.dispatchEvent(event);
            })
        }

        const offset = ref(16 * 60 * 60 * 1000)
        const list = ref([
          { id: 'hash1', text: '开端', endTime: new Date(offset.value + 10000), scale: 1 },
          { id: 'hash2', text: '发展', endTime: new Date(offset.value + 20000), scale: 1 },
          { id: 'hash3', text: '高潮', endTime: new Date(offset.value + 50000), scale: 1 },
          { id: 'hash4', text: '结局', endTime: new Date(offset.value + 100000), scale: 1 },
        ])
        function pushNewSection() {
          let id = Math.floor(Math.random() - 1000) + new Date().getTime()
          list.value.push({ id, text: '', endTime: new Date(Date.parse(list.value.at(-1).endTime)), scale: 1 })
        }
        function deleteSection(id) {
          list.value = list.value.filter(item => item.id !== id)
        }
        const progressColor = ref('#409EFF')
        const bgColor = ref('#000')
        const bgShow = ref(true)
        const globalConfig = ref({
          font: {
            color: '#fff',
            size: 35
          },
          border: {
            color: '#308dee',
            size: 5
          }
        })
        return {
          list,
          globalConfig,
          offset,
          bgColor,
          progressColor,
          bgShow,
          pushNewSection,
          deleteSection,
          convert
        }
      }
    })

    app.use(ElementPlus)

    app.mount('#app')
  </script>
</body>

</html>